<template>
    <div class="l-rblock l-form-viewer" style="padding:8px;">
        <el-form :model="formData" :rules="rules" size="mini" ref="form" label-width="100px">
            <div class="l-auto-window ">
                <el-tabs v-model="activeName" type="card">
                    <el-tab-pane class="l-tabs-container" :label="$t('基础信息')" name="tab0" v-if="lr_hasPageAuth('tab0')">
                        <el-row :gutter="0">
                            <div class="l-rblock">
                                <el-col :span="12" v-if="lr_formLookAuth('f_FullName')">
                                    <el-form-item :label="$t('名称')" prop="f_FullName">
                                        <el-input 
                                        :disabled="
                                            !lr_formEditAuth(
                                                'f_FullName',
                                                false || isReadOnly
                                            )
                                        "
                                        v-model="formData.f_FullName"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12" v-if="lr_formLookAuth('f_EnCode')">
                                    <el-form-item :label="$t('编码')" prop="f_EnCode">
                                        <el-input 
                                        :disabled="
                                            !lr_formEditAuth(
                                                'f_EnCode',
                                                false || isReadOnly
                                            )
                                        "
                                        v-model="formData.f_EnCode"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12" v-if="lr_formLookAuth('f_ShortName')">
                                    <el-form-item :label="$t('简称')" prop="f_ShortName">
                                        <el-input 
                                        :disabled="
                                            !lr_formEditAuth(
                                                'f_ShortName',
                                                false || isReadOnly
                                            )
                                        "
                                        v-model="formData.f_ShortName"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12" v-if="lr_formLookAuth('f_Nature')">
                                    <el-form-item :label="$t('性质')" prop="f_Nature">
                                        <l-select 
                                        :disabled="
                                            !lr_formEditAuth(
                                                'f_Nature',
                                                false || isReadOnly
                                            )
                                        "
                                        :options="lr_dataItem['DepartmentNature']" labelKey="f_ItemName"
                                            valueKey="f_ItemValue" v-model="formData.f_Nature"></l-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12" v-if="lr_formLookAuth('f_ParentId')">
                                    <el-form-item :label="$t('上级')" prop="f_ParentId">
                                        <l-tree-select 
                                        :disabled="
                                            !lr_formEditAuth(
                                                'f_ParentId',
                                                false || isReadOnly
                                            )
                                        "
                                        v-model="formData.f_ParentId" :options="departmentTree">
                                        </l-tree-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12" v-if="lr_formLookAuth('f_Manager')">
                                    <el-form-item :label="$t('负责人')" prop="f_Manager">
                                        <l-user-select 
                                        :disabled="
                                            !lr_formEditAuth(
                                                'f_Manager',
                                                false || isReadOnly
                                            )
                                        "
                                        v-model="formData.f_Manager"></l-user-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12" v-if="lr_formLookAuth('f_OuterPhone')">
                                    <el-form-item :label="$t('电话')" prop="f_OuterPhone">
                                        <el-input 
                                        :disabled="
                                            !lr_formEditAuth(
                                                'f_OuterPhone',
                                                false || isReadOnly
                                            )
                                        "
                                        v-model="formData.f_OuterPhone"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12" v-if="lr_formLookAuth('f_InnerPhone')">
                                    <el-form-item :label="$t('分机号')" prop="f_InnerPhone">
                                        <el-input 
                                        :disabled="
                                            !lr_formEditAuth(
                                                'f_InnerPhone',
                                                false || isReadOnly
                                            )
                                        "
                                        v-model="formData.f_InnerPhone"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12" v-if="lr_formLookAuth('f_Email')">
                                    <el-form-item :label="$t('邮箱')" prop="f_Email">
                                        <el-input 
                                        :disabled="
                                            !lr_formEditAuth(
                                                'f_Email',
                                                false || isReadOnly
                                            )
                                        "
                                        v-model="formData.f_Email"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12" v-if="lr_formLookAuth('f_Fax')">
                                    <el-form-item :label="$t('传真')" prop="f_Fax">
                                        <el-input 
                                        :disabled="
                                            !lr_formEditAuth(
                                                'f_Fax',
                                                false || isReadOnly
                                            )
                                        "
                                        v-model="formData.f_Fax"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12" v-if="lr_formLookAuth('f_SortCode')">
                                    <el-form-item :label="$t('排序')" prop="f_SortCode">
                                        <el-input 
                                        :disabled="
                                            !lr_formEditAuth(
                                                'f_SortCode',
                                                false || isReadOnly
                                            )
                                        "
                                        v-model="formData.f_SortCode"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24" v-if="lr_formLookAuth('f_Description')">
                                    <el-form-item :label="$t('说明')" prop="f_Description">
                                        <el-input 
                                        :disabled="
                                            !lr_formEditAuth(
                                                'f_Description',
                                                false || isReadOnly
                                            )
                                        "
                                        type="textarea" v-model="formData.f_Description"></el-input>
                                    </el-form-item>
                                </el-col>
                            </div>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane class="l-tabs-container" :label="$t('人事信息')" name="tab1" v-if="lr_hasPageAuth('tab1')">
                        <el-row :gutter="0">
                            <div class="l-rblock">
                                <el-col :span="24" v-if="lr_formLookAuth('f_ManagerId')">
                                    <el-form-item :label="$t('行政正职领导')" prop="f_ManagerId">
                                        <l-user-select 
                                        :disabled="
                                            !lr_formEditAuth(
                                                'f_ManagerId',
                                                false || isReadOnly
                                            )
                                        "
                                        v-model="formData.f_ManagerId" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24" v-if="lr_formLookAuth('f_PartyManagerId')">
                                    <el-form-item :label="$t('党委正职领导')" prop="f_PartyManagerId">
                                        <l-user-select 
                                        :disabled="
                                            !lr_formEditAuth(
                                                'f_PartyManagerId',
                                                false || isReadOnly
                                            )
                                        "
                                        v-model="formData.f_PartyManagerId" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24" v-if="lr_formLookAuth('f_ManagerIds')">
                                    <el-form-item :label="$t('部门领导')" prop="f_ManagerIds">
                                        <l-user-select 
                                        :disabled="
                                            !lr_formEditAuth(
                                                'f_ManagerIds',
                                                false || isReadOnly
                                            )
                                        "
                                        multiple v-model="formData.f_ManagerIds" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24" v-if="lr_formLookAuth('f_LeaderIds')">
                                    <el-form-item :label="$t('上级分管领导')" prop="f_LeaderIds">
                                        <l-user-select 
                                        :disabled="
                                            !lr_formEditAuth(
                                                'f_LeaderIds',
                                                false || isReadOnly
                                            )
                                        "
                                        multiple v-model="formData.f_LeaderIds" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24" v-if="lr_formLookAuth('f_DeptTag')">
                                    <el-form-item :label="$t('部门标签')" prop="f_DeptTag">
                                        <l-select 
                                        :disabled="
                                            !lr_formEditAuth(
                                                'f_DeptTag',
                                                false || isReadOnly
                                            )
                                        "
                                        :multiple="true" :options="f_DeptTagOptions"
                                            v-model="formData.f_DeptTag" />
                                    </el-form-item>
                                </el-col>
                            </div>
                        </el-row>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-form>
    </div>
</template>
<script>
export default {
    props: {
        isReadOnly: {
        type: Boolean,
        default: false,
        },
    },
    data() {
        return {
            formData: {
                f_CompanyId: '',
                f_FullName: '',
                f_ShortName: '',
                f_EnCode: '',
                f_Nature: '',
                f_ParentId: '0',
                f_Manager: '',
                f_OuterPhone: '',
                f_InnerPhone: '',
                f_Email: '',
                f_Fax: '',
                f_Description: '',

                f_SortCode: 99,//排序
                f_ManagerId:"",//行政正职领导
                f_PartyManagerId:"",//党委正职领导
                f_ManagerIds:"",//部门领导
                f_LeaderIds:"",//上级分管领导
                f_DeptTa:"",//部门标签
            },
            rules: {
                f_FullName: [
                    { required: true, message: this.$t('请输入部门名称') }
                ],
                f_EnCode: [
                    { required: true, message: this.$t('请输入部门编号') },
                    { pattern: /^[-+]?\d+$/, message: this.$t('部门编号需要为数字') },
                    { validator: this.lr_existDbFiled, keyValue: () => { return this.formData.f_DepartmentId }, tableName: 'lr_base_dept', keyName: 'f_DepartmentId', trigger: 'null' }
                ]
            }
        }
    },
    computed: {
        activeName:{
            get() {
                return "tab0";
            },
            set() {
                const tabs = [
                "tab0","tab1"
                ].filter(t=>this.lr_hasPageAuth(t));
                if(tabs.length > 0){
                return tabs[0].value;
                }
                else{
                return ''
                }
            },
        },
        departmentTree() {
            return this.$toTree(this.lr_departments[this.formData.f_CompanyId] || [], "f_DepartmentId", "f_ParentId", "f_DepartmentId", "f_FullName", [this.formData.f_DepartmentId])
        },
        f_DeptTagOptions(){
            return this.lr_dataItemOptions(this.lr_dataItem['DeptTagsManage'])
        },

    },
    created() {
        this.lr_loadDataItem('DepartmentNature')
        this.lr_loadDataItem('DeptTagsManage')
    },
    methods: {
        resetForm() {
            this.formData.f_DepartmentId = ''
            this.activeName = "tab0";
            this.$refs.form && this.$refs.form.resetFields()
        },
        // 校验表单
        validateForm(callback) {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    callback()
                }
            })
        },
        setForm(data) {
            this.formData = this.$deepClone(data)
        },
        getForm() {
            return this.$deepClone(this.formData)
        }
    }
}
</script>